/**
 * 装车明细 - 弹窗
 * @author xiaoxujs
 */

import { Button, ConfigProvider, message, Modal, Popover, Table, TableProps, Tooltip } from "antd";
import { FC, useCallback, useEffect, useState } from "react";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { INoFenye } from "../../../../../type/commit";
import { ITlplTReportAnalyse, ITlplTReportList } from "../../../../../type/WaybillManagement/api";
import { getTlplTReportList } from "../../../api";
import { basicIp } from "../../../../../api/http";

const LoadingDetails: FC<{
    open: boolean;
    clickData?: ITlplTReportAnalyse;
    planId?: string;
    handleCallback: () => void;
}> = ({
    open,
    clickData,
    handleCallback,
    planId
}) => {
        const [listData, setListData] = useState<ITlplTReportList[]>([]); // 列表数据
        const [tableLoading, setTableLoading] = useState(false); //tableLoading

        const listFun = useCallback(
            async () => {
                if (clickData && planId) {
                    setTableLoading(true);
                    const params = {
                        carColour: clickData.carColour,
                        carNo: clickData.carNo,
                        planId: planId
                    }
                    const { code, msg, data } = await getTlplTReportList(params) as INoFenye<ITlplTReportList>;
                    if (code === 20000) {
                        setListData(data);
                    } else {
                        message.error(msg);
                    }
                    setTableLoading(false);
                }

            },
            [clickData, planId],
        )
        useEffect(() => {
            listFun();
        }, [listFun])

        const handleCancel = () => {
            console.log('取消')
            handleCallback()
        }
        const handleNewUpload = (item: any) => {
            const link = document.createElement("a");
            link.href = basicIp + item;
            link.target = '_blank';
            document.body.appendChild(link);
            link.click();
        }

        const popoverContent = (arr:any[]) => {
            if (!arr) return <div>暂无数据</div>; // 如果 arr 是 null 或 undefined，返回 null
          
            return (
              <div>
                {arr.map((item, index) => (
                  <Button
                    key={index}
                    type="link"
                    onClick={() => handleNewUpload(item.url)}
                  >
                    <Tooltip title={item.fileName}>{item.fileName.length < 10 ? item.fileName : item.fileName.substring(0, 7) + '...'}</Tooltip>
                  </Button>
                ))}
              </div>
            );
          };
        const columns: TableProps<ITlplTReportList>['columns'] = [
            {
                title: '序号',
                align: 'center',
                render: (_, record, index) => (
                    <span>{index + 1}</span>
                ),
            },
            {
                title: '提货日期',
                dataIndex: 'date',
                align: 'center',
            },
            {
                title: '一次计量(吨)',
                dataIndex: 'tare',
                align: 'center',
            },
            {
                title: '二次计量(吨)',
                dataIndex: 'rough',
                align: 'center',
            },
            {
                title: '净重(吨)',
                dataIndex: 'suttle',
                align: 'center',
            },
            {
                title: '车辆照片',
                align: 'center',
                width: useWindowFontSize(120),
                render(value, record, index) {
                    return (
                        <>
                        <Popover content={popoverContent(record.pictureList)} trigger="click">
                            <Button type="link" >查看图片</Button>
                        </Popover>
                        </>
                    );
                },
            },
        ];
        return <Modal title="历史装车数据" width={useWindowFontSize(802)} open={open} onCancel={handleCancel} footer={(_, { CancelBtn }) => <CancelBtn />}>

            <ConfigProvider theme={{
                components: {
                    Table: {
                        headerColor: '#8B9BAC',
                        cellFontSize: useWindowFontSize(14),
                        cellPaddingBlock: 7
                    }
                }
            }}>
                <Table<ITlplTReportList>
                    pagination={false}
                    rowKey='id'
                    columns={columns}
                    dataSource={listData}
                    loading={tableLoading}
                    style={{ border: '0.1rem solid #F3F3F3' }}
                // bordered
                />
            </ConfigProvider>
        </Modal>
    }

export default LoadingDetails;